<template>
  <div class="box" style="width: 998px">
    <div class="chukuqueren_search">
      <div class="canshuguanli_hd">出库办理</div>
      <table cellspacing="0" cellpadding="0" class="table_top">
        <tbody>
          <tr>
            <td><span>货主</span><input type="text" /><i>*</i></td>
            <td><span>出货单号</span><input type="text" /><i>*</i></td>
          </tr>
          <tr>
            <td colspan="2"><span>卖家</span><input type="text" /><i>*</i></td>
          </tr>
        </tbody>
      </table>
      <span class="title_span">选货</span>
    </div>
    <table width="1000px" cellspacing="0" cellpadding="0" class="chukuqueren_tb">
      <thead>
        <td>托盘编号</td>
        <td>货物名称</td>
        <td>规格（公斤/件）</td>
        <td>现存件数</td>
        <td>提货件数</td>
        <td>出库重量（公斤）</td>
      </thead>

      <tr>
        <td>
          <label>
            <input type="checkbox" />
            <span class="canshuID">20161122</span>
          </label>
        </td>
        <td>周杰伦</td>
        <td>25</td>
        <td>998</td>
        <td>1233</td>
        <td>110</td>
      </tr>
      <tr>
        <td colspan="" class="rukuzongjianshu">托盘个数：<span>20</span></td>
        <td colspan="2" class="rukuzongjianshu">总重量（公斤）：<span>30825</span></td>
      </tr>
    </table>
    <table
      width="1000px;"
      cellspacing="0"
      cellpadding="0"
      class="table_down"
      style="margin-top: 20px"
    >
      <tfoot>
        <tr>
          <td colspan="3">费用结算</td>
        </tr>
        <tr class="tfoot_td">
          <td><span>库存费用</span><input type="text" /> 元</td>
          <td><span>其他费用</span><input type="text" /> 元</td>
          <td><span>合计应收</span><input type="text" /> 元</td>
        </tr>
        <tr class="tfoot_td">
          <td colspan="3"><span>合计实收</span><input type="text" /> 元</td>
        </tr>
        <tr>
          <td colspan="2" class="bt_td">
            <button class="button_bt bt_jiesuan">结算费用</button>
            <button class="button_bt bt_reset">重置</button>
          </td>
        </tr>
      </tfoot>
    </table>
    <div class="mask">
      <table cellspacing="0" cellpadding="0" class="table_down">
        <th>
          <tr>
            <td colspan="6">货主：陶宏生 货主编号<span>5</span></td>
          </tr>
          <tr>
            <td>货物编号</td>
            <td>货物名称</td>
            <td>规格（公斤/件）</td>
            <td>件数</td>
            <td>重量（公斤）</td>
            <td>价格</td>
          </tr>
        </th>
        <tbody>
          <tr>
            <td><input type="checkbox" /></td>
            <td>鸡蛋</td>
            <td>23</td>
            <td>13</td>
            <td>2</td>
            <td>21</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>鸡蛋</td>
            <td>23</td>
            <td>13</td>
            <td>2</td>
            <td>21</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>鸡蛋</td>
            <td>23</td>
            <td>13</td>
            <td>2</td>
            <td>21</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>鸡蛋</td>
            <td>23</td>
            <td>13</td>
            <td>2</td>
            <td>21</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="6" class="bt_td">
              <button class="button_bt bt_sure">确认</button>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>
<style scoped>
.chukuqueren_tb {
  text-align: center;
  border: 1px solid #eee;
  font-size: 14px;
  color: #666;
  min-width: 1000px;
  overflow: scroll;
}

.chukuqueren_tb thead tr {
  height: 35px;
  background-color: #eee;
  color: #2e6095;
  font-weight: 700;
}

.chukuqueren_tb tbody tr td {
  border-bottom: 1px solid #eee;
}

.chukuqueren_tb tr td {
  height: 35px;
}

.canshuID {
  margin-left: 10px;
}

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: "微软雅黑";
}
li {
  list-style: none;
}
.box {
  border: 1px solid #e8e9ea;
}
.title_p {
  font-size: 14px;
  color: #2e6095;
  line-height: 38px;
  background: #f8f8f8;
  padding-left: 14px;
  border-bottom: 1px solid #e8e9ea;
}
table {
  width: 96%;
  border: 1px solid #e8e9ea;
  margin: 25px auto;
  background: #f9f9f9;
}
table tr {
  width: 100%;
  height: 46px;
}
table tr td {
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #e8e9ea;
  padding-left: 16px;
}
table tr td i {
  color: #eb5a12;
}
tbody tr:last-child td {
  border-bottom: none;
}
.textarea_box {
  width: 590px;
  height: 126px;
  border-color: #cbced0;
  margin-top: 15px;
  margin-bottom: 12px;
  font-family: "微软雅黑";
}
.button_bt {
  width: 104px;
  height: 34px;
  background: #dcdee0;
  border: 1px solid #cbced0;
  float: left;
  font-family: "微软雅黑";
  font-size: 16px;
  cursor: pointer;
}
.bt_jiesuan,
.bt_submit {
  width: 106px;
  height: 36px;
  background: #1a71b4;
  color: #fff;
  border: none;
  margin-left: 82px;
}
.bt_reset {
  background: #dcdee0;
  color: #333;
  margin-left: 20px;
  border: 1px solid #cbced0;
}
.bt_submit {
  margin-left: 10px;
}
/*过户办理*/
.table_box tr td:first-child {
  border-right: 1px solid #e8e9ea;
  text-align: right;
  padding: 0 16px;
  width: 100px;
}
.table_box tr td input {
  width: 273px;
  height: 28px;
  border: 1px solid #e8e9ea;
  padding-left: 5px;
}
.table_box tr td select {
  width: 278px;
  height: 28px;
  border: 1px solid #e8e9ea;
  float: left;
  background: #fff;
}
.table_box tr td i {
  margin-left: 26px;
}
.table_box tr .bt_td {
  height: 72px;
}
.table_box tr td span {
  display: block;
  width: 60px;
  height: 24px;
  float: left;
  margin-right: 2px;
  background: #cccccc;
}
.table_box tr td .low {
  background: #fc755a;
}
.table_box tr td .middle {
  background: #f9c24b;
}
.table_box tr td .high {
  background: #76d85b;
}
.table_box tr .bei_td {
  vertical-align: top;
  line-height: 46px;
}

/*过户货物明细*/
.table_top {
  margin: 25px auto 0;
}
.table_top tr td {
  text-align: left;
}
.table_top tr td:first-child {
  border-right: 1px solid #e8e9ea;
  padding: 0 16px;
  width: 283px;
}
.table_top tr td span {
  float: left;
  line-height: 46px;
}
.table_top tr td input {
  float: left;
  width: 193px;
  height: 28px;
  border: 1px solid #e8e9ea;
  padding-left: 5px;
  margin-top: 8px;
  margin-left: 20px;
}
.table_top tr td i {
  margin-left: 6px;
  line-height: 46px;
}
.table_top tr td:first-child input {
  margin-left: 42px;
}
.title_span {
  display: block;
  width: 58px;
  height: 28px;
  cursor: pointer;
  line-height: 28px;
  margin: 10px 0 10px 2%;
  background: #dbdee0;
  border: 1px solid #cbced0;
  color: #333;
  font-size: 14px;
  text-align: center;
}

.table_down {
  margin: 0 auto 25px;
}
.table_down tbody {
  background: #fff;
}
.table_down tr {
  height: 38px;
}
.table_down tr td {
  padding: 0 15px;
}
.table_down tr td .bt_remove {
  border: none;
  color: #2f97e7;
  font-size: 14px;
  background: #f9f9f9;
  cursor: pointer;
  text-decoration: underline;
  outline: none;
}
.table_down tr .text_td {
  font-size: 14px;
  color: #1a71b4;
  font-weight: bold;
}
.table_down tr .text_td p {
  float: left;
}
.number_p {
  margin-right: 60px;
}
.table_down tfoot tr:first-child td {
  border-top: 2px solid #e8e9ea;
  color: #333;
}
.table_down tfoot .textarea_box {
  margin-left: 32px;
}
.table_down .tfoot_td {
  height: 46px;
}
.table_down .tfoot_td td {
  border-right: 1px solid #e8e9ea;
}
.table_down .tfoot_td td:last-child {
  border-right: none;
}
/*.table_down tfoot span{float: left;}*/
.table_down tfoot input {
  width: 93px;
  height: 28px;
  padding-left: 5px;
  border: 1px solid #cbced0;
  margin-left: 15px;
}
.table_down .bt_td {
  height: 72px;
}

/*仓库使用明细查询*/
.title_ul {
  overflow: hidden;
  width: 555px;
  margin: 5px auto;
}
.title_ul li {
  float: left;
  width: 80px;
  height: 30px;
  margin: 0 5px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #cbced0;
  color: #333;
  background: #dcdee0;
}
.on {
  color: #000;
  font-weight: bold;
}
.tab_ul {
  width: 350px;
  margin: 0 auto;
}
.tab_ul .tab_ul_ck {
  display: none;
}
.tab_ul_ck_on {
  display: block !important;
}
.tab_ul li p {
  font-size: 16px;
  color: #333;
  line-height: 30px;
  text-align: center;
}
.tab_box {
  margin: 0 auto;
}
.ck_zt {
  overflow: hidden;
}
.ck_zt li {
  float: left;
  margin: 0 5px;
  font-size: 14px;
  line-height: 28px;
}

/*调仓管理  货物移盘*/
.tuopan_k_span,
.tuopan_cw_span {
  background: none !important;
  line-height: 28px;
  width: auto !important;
}
.tuopan_cw_span {
  margin-left: 8px;
}
.tuopan_select {
  float: left;
  width: 245px !important;
}
.tuopan_i {
  float: left;
  line-height: 28px;
}

/*弹框*/
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
.mask table {
  width: 800px;
  left: 50%;
  margin-left: -400px;
  top: 50%;
  margin-top: -200px;
  position: fixed;
}
</style>
